/**
 * 聊天对话模板, type = 0 时, 表示消息由己方发送, 显示有右侧, 为 1 时, 消息由对方发送, 显示在左侧
 * 默认模块名: pages/chat/chat
 * @return {[object]}  [ 返回一个对象 ]
 */
loader.define(function (require, exports, module) {

    var pageview = {};


    // 模块初始化定义
    pageview.init = function () {
        this.bind();

        this.showDialog();
    };
    // 根据 sessionStorage 信息获取 聊天记录 并设置最新20笔记录
    pageview.showDialog = function () {
        // 获取当前聊天对象
        let chatUser = sessionStorage.getItem('chatUser');
        // 修改头部名称
        $(".bui-bar-main").text(chatUser);
        let item = sessionStorage.getItem('chatUser-' + chatUser);
        if (item === null) {
            // 如果没有聊天记录 , 查询数据库获取前20笔资料
            myAjax({
                //几个参数需要注意一下
                method: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "chatMessage/" +  chatUser,//url
                data : {
                    page: 0
                },
                success: function (result) {
                    sessionStorage.setItem('chatUser-' + chatUser, JSON.stringify(result.data));
                    showDialog(result.data);
                }
            })

/*            let data = [{
                "type" : 0,
                "message" : "你好啊",
                "date" : "2018/1/1 08:30:50"
            },{
                "type" : 1,
                "message" : "你好",
                "date" : "2018/1/1 08:31:50"
            },{
                "type" : 0,
                "message" : "很高兴见到你",
                "date" : "2018/1/1 08:35:50"
            }];*/

        } else {
            let data = JSON.parse(sessionStorage.getItem('chatUser-' + chatUser));
            showDialog(data);
        }
    };
    pageview.bind = function () {
        // 发送的内容
        var $chatInput = $("#chatInput"),
            // 发送按钮
            $btnSend = $("#btnSend"),
            // 聊天的容器
            $chatPanel = $(".chat-panel");

        // 绑定发送按钮
        $btnSend.on("click", function (e) {
            var val = $chatInput.val();


            if (!$(this).hasClass("disabled")) {
                WEBSOCKET.sendMessage(val);
                let formatData = {
                    "type" : 0,
                    "message" : val,
                    "date" : new Date()
                };
                appendInfo(formatData, "append");
                // 将消息同步到 sessionStorage 中
                let chatUser = sessionStorage.getItem('chatUser');
                let oldData = JSON.parse(sessionStorage.getItem("chatUser-" + chatUser));
                oldData.unshift(formatData);
                sessionStorage.setItem("chatUser-" + chatUser, JSON.stringify(oldData));
                // 清空发送栏
                $chatInput.val('');
                $(this).removeClass("primary").addClass("disabled");
            } else {
                return false;
            }
        });

        // 延迟监听输入
        $chatInput.on("input", bui.unit.debounce(function () {
            var val = $chatInput.val();
            if (val) {
                $btnSend.removeClass("disabled").addClass("primary");

            } else {
                $btnSend.removeClass("primary").addClass("disabled");

            }
        }, 100))
    };

    let showDialog = function(data){
/*        for (let i = data.length - 1; i >= 0; i--) {
            appendInfo(data[i]);
        }*/
        $.each(data,function(index,value){
            // console.log(value.message);
            // 由于查询旧资料时, 资料显示方式为在开头拼接, 此处增加一个 flag 参数,
            appendInfo(value, "prepend");
        });
    };



    // 初始化
    pageview.init();

    // 输出模块
    module.exports = pageview;
})
/**
 * data = {
            "type" : 0,
            "message" : "你好啊",
            "date" : "2018/1/1 08:30:50"
        }
 * @param data
 * @param flag 标志 : append/prepend
 */
function appendInfo(data, flag) {
    flag = flag || "append";
    // 聊天的容器
    let $chatPanel = $(".chat-panel");
    let dateStr = new Date(data.date).format("yyyy/MM/dd hh:mm");
    let date = chatTpl(dateStr, 2);
    let chatMsg = chatTpl(data.message, data.type);
    if (flag === "append") {

        // 判断时间是否 相隔3分钟以上
        // 获取上一笔时间, 上一笔时间更小 ,新增的时间更大
        let $first_time = $chatPanel.find(".time").last();
        let preDateStr = $first_time.text();
        if (preDateStr != null) {
            // 时间间隔超过3分钟时, 才显示时间数
            if (new Date(dateStr).getTime() - new Date(preDateStr).getTime() > 3*60*1000) {
                $chatPanel.append(date);
            }
        }
        $chatPanel.append(chatMsg);
    } else {
        $chatPanel.prepend(chatMsg);
        // 判断时间是否 相隔3分钟以上
        // 获取上一笔时间, 由于倒过来往上append, 上一笔时间更大
        let $first_time = $chatPanel.find(".time").first();
        let preDateStr = $first_time.text();
        if (preDateStr != null) {
            // 时间间隔不超过3分钟时, 不显示时间数, (注意: 如果每条消息都不超过3分钟间隔, 将只会显示最上面一笔时间)
            if (new Date(preDateStr).getTime() - new Date(dateStr).getTime() < 3*60*1000) {
                $first_time.parent().remove();
            }
        }
        $chatPanel.prepend(date);
    }
    let elementById = document.getElementById("msg_end");
    elementById.scrollIntoView();
}

// 聊天模板
let chatTpl = function (data, type) {
    var html = "";
    type = type || 0;
    switch (type) {
        // 己方发送的消息
        case 0:
            html += '<div class="bui-box-align-top chat-mine">';
            html += '    <div class="span1">';
            html += '    </div>';
            html += '    <div class="chat-content bui-arrow-right">' + data + '</div>';
            html += '    <div class="chat-icon"><img src="/images/applogo.png" alt=""></div>';
            html += '</div>';
            break;
        // 对方发送的消息
        case 1:
            html += '<div class="bui-box-align-top chat-target">';
            html += '    <div class="chat-icon"><img src="/images/applogo.png" alt=""></div>';
            html += '    <div class="chat-content bui-arrow-left">' + data + '</div>';
            html += '    <div class="span1">';
            html += '    </div>';
            html += '</div>';
            break;
        // 时间
        case 2:
            html += '<div class="bui-box-center">';
            html += '    <div class="time">' + data + '</div>';
            html += '</div>';
            break;
    }

    return html;
}